﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Earthwatchers Admin</title>
    <link href="uploadfile.css" rel="stylesheet" />
    <script src="jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="jquery.base64.js" type="text/javascript"></script>
    <script src="jquery.uploadfile.min.js" type="text/javascript"></script>

    <style>
        body {
            font-family: Helvetica, Arial, "Lucida Grande", sans-serif;
        }

        .tdnumber {
            text-align: right;
        }

        .tdcheck {
            text-align: center;
        }

        .url {
            width: 300px;
        }

        .label {
            float: left;
            width: 96px;
            margin-left: 0px;
        }

        #hourInput {
            width: 40px;
        }

        #minutesInput {
            width: 40px;
        }

        #descriptionInput {
            width: 400px;
            height: 150px;
        }
    </style>
</head>
<body>
    <h3>Administrator - Daily Messages</h3>
    <br />
    <br />
    username:
    <input type="text" id="tbUsername" value="" /><br />
    password:
    <input type="password" id="tbPassword" value="" />
    <br />
    <br />

    <input id="LoadDailyMessages" type="button" value="Cargar Valores" />
    <br />
    <h4>Agregar Mensaje</h4>
    <div>
        <div style="float: left;">

            <div class="label">T&iacute;tulo Corto</div>
            <div>
                <input id="shortTitle" />
            </div>

            <br />

            <div class="label">T&iacute;tulo</div>
            <div>
                <input id="title" />
            </div>

            <br />

            <div class="label">Descripcion</div>
            <div>
                <textarea id="descriptionInput"></textarea>
            </div>

            <br />
            <!--TODO: CARGAR UNA IMAGEN DESDE LA PC-->
            <br />
            <div id="fileuploader">Subir Imagen</div>
            <script>
                $(document).ready(function () {
                    $("#fileuploader").uploadFile({
                        url: "upload.php",
                        fileName: "myfile",
                        maxFileSize: 1000000,
                        onSuccess: function (files, data, xhr) {
                            $('#imageUrlInput').val(files[0]);
                            //files: list of files
                            //data: response from server
                            //xhr : jquer xhr object
                        }
                    });
                });
            </script>
            <input id="imageUrlInput" type="hidden" name="imageUrlInput" />

            <br />

            <input id="addDailyMessage" type="button" value="Agregar" />
        </div>

        <div style="float: left; margin-left: 10px; border: solid 1px #CCCCCC; padding: 10px">

            <label><b>Fecha de Inicio: </b></label>
            <br />
            <br />

            <div class="label">Día</div>
            <div>
                <select id="dayInput">
                    <option value="01">01</option>
                    <option value="02">02</option>
                    <option value="03">03</option>
                    <option value="04">04</option>
                    <option value="05">05</option>
                    <option value="06">06</option>
                    <option value="07">07</option>
                    <option value="08">08</option>
                    <option value="09">09</option>
                    <option value="10">10</option>
                    <option value="11">11</option>
                    <option value="12">12</option>
                    <option value="13">13</option>
                    <option value="14">14</option>
                    <option value="15">15</option>
                    <option value="16">16</option>
                    <option value="17">17</option>
                    <option value="18">18</option>
                    <option value="19">19</option>
                    <option value="20">20</option>
                    <option value="21">21</option>
                    <option value="22">22</option>
                    <option value="23">23</option>
                    <option value="24">24</option>
                    <option value="25">25</option>
                    <option value="26">26</option>
                    <option value="27">27</option>
                    <option value="28">28</option>
                    <option value="29">29</option>
                    <option value="30">30</option>
                    <option value="31">31</option>
                </select>
            </div>

            <br />

            <div class="label">Mes</div>
            <div>
                <select id="monthInput">
                    <option value="01">01</option>
                    <option value="02">02</option>
                    <option value="03">03</option>
                    <option value="04">04</option>
                    <option value="05">05</option>
                    <option value="06">06</option>
                    <option value="07">07</option>
                    <option value="08">08</option>
                    <option value="09">09</option>
                    <option value="10">10</option>
                    <option value="11">11</option>
                    <option value="12">12</option>
                </select>
            </div>

            <br />

            <div class="label">A&ntilde;o</div>
            <div>
                <input id="yearInput" value="2014" style="width: 60px" />
            </div>

            <br />

            <div class="label">Hora</div>
            <div>
                <select id="hourInput">
                    <option value="00">00</option>
                    <option value="01">01</option>
                    <option value="02">02</option>
                    <option value="03">03</option>
                    <option value="04">04</option>
                    <option value="05">05</option>
                    <option value="06">06</option>
                    <option value="07">07</option>
                    <option value="08">08</option>
                    <option value="09">09</option>
                    <option value="10">10</option>
                    <option value="11">11</option>
                    <option value="12">12</option>
                    <option value="13">13</option>
                    <option value="14">14</option>
                    <option value="15">15</option>
                    <option value="16">16</option>
                    <option value="17">17</option>
                    <option value="18">18</option>
                    <option value="19">19</option>
                    <option value="20">20</option>
                    <option value="21">21</option>
                    <option value="22">22</option>
                    <option value="23">23</option>
                </select>
            </div>

            <br />

            <div class="label">Minutos</div>
            <div>
                <select id="minutesInput">
                    <option value="00">00</option>
                    <option value="01">01</option>
                    <option value="02">02</option>
                    <option value="03">03</option>
                    <option value="04">04</option>
                    <option value="05">05</option>
                    <option value="06">06</option>
                    <option value="07">07</option>
                    <option value="08">08</option>
                    <option value="09">09</option>
                    <option value="10">10</option>
                    <option value="11">11</option>
                    <option value="12">12</option>
                    <option value="13">13</option>
                    <option value="14">14</option>
                    <option value="15">15</option>
                    <option value="16">16</option>
                    <option value="17">17</option>
                    <option value="18">18</option>
                    <option value="19">19</option>
                    <option value="20">20</option>
                    <option value="21">21</option>
                    <option value="22">22</option>
                    <option value="23">23</option>
                    <option value="24">24</option>
                    <option value="25">25</option>
                    <option value="26">26</option>
                    <option value="27">27</option>
                    <option value="28">28</option>
                    <option value="29">29</option>
                    <option value="30">30</option>
                    <option value="31">31</option>
                    <option value="32">32</option>
                    <option value="33">33</option>
                    <option value="34">34</option>
                    <option value="35">35</option>
                    <option value="36">36</option>
                    <option value="37">37</option>
                    <option value="38">38</option>
                    <option value="39">39</option>
                    <option value="40">40</option>
                    <option value="41">41</option>
                    <option value="42">42</option>
                    <option value="43">43</option>
                    <option value="44">44</option>
                    <option value="45">45</option>
                    <option value="46">46</option>
                    <option value="47">47</option>
                    <option value="48">48</option>
                    <option value="49">49</option>
                    <option value="50">50</option>
                    <option value="51">51</option>
                    <option value="52">52</option>
                    <option value="53">53</option>
                    <option value="54">54</option>
                    <option value="55">55</option>
                    <option value="56">56</option>
                    <option value="57">57</option>
                    <option value="58">58</option>
                    <option value="59">59</option>
                </select>
            </div>

        </div>

        <div style="float: left; margin-left: 10px; border: solid 1px #CCCCCC; padding: 10px">

            <label><b>Fecha de Fin: </b></label>

            <br />
            <br />

            <div class="label">Día</div>
            <div>
                <select id="enddayInput">
                    <option value="01">01</option>
                    <option value="02">02</option>
                    <option value="03">03</option>
                    <option value="04">04</option>
                    <option value="05">05</option>
                    <option value="06">06</option>
                    <option value="07">07</option>
                    <option value="08">08</option>
                    <option value="09">09</option>
                    <option value="10">10</option>
                    <option value="11">11</option>
                    <option value="12">12</option>
                    <option value="13">13</option>
                    <option value="14">14</option>
                    <option value="15">15</option>
                    <option value="16">16</option>
                    <option value="17">17</option>
                    <option value="18">18</option>
                    <option value="19">19</option>
                    <option value="20">20</option>
                    <option value="21">21</option>
                    <option value="22">22</option>
                    <option value="23">23</option>
                    <option value="24">24</option>
                    <option value="25">25</option>
                    <option value="26">26</option>
                    <option value="27">27</option>
                    <option value="28">28</option>
                    <option value="29">29</option>
                    <option value="30">30</option>
                    <option value="31">31</option>
                </select>
            </div>

            <br />

            <div class="label">Mes</div>
            <div>
                <select id="endmonthInput">
                    <option value="01">01</option>
                    <option value="02">02</option>
                    <option value="03">03</option>
                    <option value="04">04</option>
                    <option value="05">05</option>
                    <option value="06">06</option>
                    <option value="07">07</option>
                    <option value="08">08</option>
                    <option value="09">09</option>
                    <option value="10">10</option>
                    <option value="11">11</option>
                    <option value="12">12</option>
                </select>
            </div>

            <br />

            <div class="label">A&ntilde;o</div>
            <div>
                <input id="endyearInput" value="2014" style="width: 60px" />
            </div>

            <br />

            <div class="label">Hora</div>
            <div>
                <select id="endhourInput">
                    <option value="00">00</option>
                    <option value="01">01</option>
                    <option value="02">02</option>
                    <option value="03">03</option>
                    <option value="04">04</option>
                    <option value="05">05</option>
                    <option value="06">06</option>
                    <option value="07">07</option>
                    <option value="08">08</option>
                    <option value="09">09</option>
                    <option value="10">10</option>
                    <option value="11">11</option>
                    <option value="12">12</option>
                    <option value="13">13</option>
                    <option value="14">14</option>
                    <option value="15">15</option>
                    <option value="16">16</option>
                    <option value="17">17</option>
                    <option value="18">18</option>
                    <option value="19">19</option>
                    <option value="20">20</option>
                    <option value="21">21</option>
                    <option value="22">22</option>
                    <option value="23">23</option>
                </select>
            </div>

            <br />

            <div class="label">Minutos</div>
            <div>
                <select id="endminutesInput">
                    <option value="00">00</option>
                    <option value="01">01</option>
                    <option value="02">02</option>
                    <option value="03">03</option>
                    <option value="04">04</option>
                    <option value="05">05</option>
                    <option value="06">06</option>
                    <option value="07">07</option>
                    <option value="08">08</option>
                    <option value="09">09</option>
                    <option value="10">10</option>
                    <option value="11">11</option>
                    <option value="12">12</option>
                    <option value="13">13</option>
                    <option value="14">14</option>
                    <option value="15">15</option>
                    <option value="16">16</option>
                    <option value="17">17</option>
                    <option value="18">18</option>
                    <option value="19">19</option>
                    <option value="20">20</option>
                    <option value="21">21</option>
                    <option value="22">22</option>
                    <option value="23">23</option>
                    <option value="24">24</option>
                    <option value="25">25</option>
                    <option value="26">26</option>
                    <option value="27">27</option>
                    <option value="28">28</option>
                    <option value="29">29</option>
                    <option value="30">30</option>
                    <option value="31">31</option>
                    <option value="32">32</option>
                    <option value="33">33</option>
                    <option value="34">34</option>
                    <option value="35">35</option>
                    <option value="36">36</option>
                    <option value="37">37</option>
                    <option value="38">38</option>
                    <option value="39">39</option>
                    <option value="40">40</option>
                    <option value="41">41</option>
                    <option value="42">42</option>
                    <option value="43">43</option>
                    <option value="44">44</option>
                    <option value="45">45</option>
                    <option value="46">46</option>
                    <option value="47">47</option>
                    <option value="48">48</option>
                    <option value="49">49</option>
                    <option value="50">50</option>
                    <option value="51">51</option>
                    <option value="52">52</option>
                    <option value="53">53</option>
                    <option value="54">54</option>
                    <option value="55">55</option>
                    <option value="56">56</option>
                    <option value="57">57</option>
                    <option value="58">58</option>
                    <option value="59">59</option>
                </select>
            </div>

        </div>

    </div>
    <div style="clear: both;"></div>
    <div style="margin-top: 20px">
        <h4>Listado de Mensajes</h4>
        <table border="1" cellpadding="6" cellspacing="0">
            <thead>
                <tr style="background-color: #cecece">
                    <td>Fecha de inicio</td>
                    <td>Fecha de fin</td>
                    <td>T&iacute;tulo Corto</td>
                    <td>T&iacute;tulo</td>
                    <td>Descripcion</td>
                    <td>Imagen</td>
                    <td></td>
                </tr>
            </thead>
            <tbody id="MessagesTable">
            </tbody>
        </table>
        <br />
        <a href="index.html">back</a>
    </div>

    <script type="text/javascript">
        function getAuthString() {
            return "Basic " + $.base64Encode(document.getElementById("tbUsername").value + ":" + document.getElementById("tbPassword").value);
        }

        function LoadDailyMessages() {
            $('#MessagesTable').html('');

            $.ajax({
                cache: false,
                type: "GET",
                data: "{\"Name\":\"" + document.getElementById("tbUsername").value + "\",\"Password\":\"" + document.getElementById("tbPassword").value + "\" }",
                url: "../api/popupmessages/getall",
                beforeSend: function (xhr) {
                    xhr.setRequestHeader("Authorization", getAuthString());
                },
                contentType: "application/json ; charset=utf-8",
                dataType: "json",
                success: function (result) {
                    $(result).each(function ()
                    {
                        var stDate = new Date(parseInt($(this).attr('StartDate').substr(6))).toLocaleDateString();
                        var stDate1 = new Date(parseInt($(this).attr('StartDate').substr(6))).toLocaleTimeString();

                        var ndDate = new Date(parseInt($(this).attr('EndDate').substr(6))).toLocaleDateString();
                        var ndDate1 = new Date(parseInt($(this).attr('EndDate').substr(6))).toLocaleTimeString();

                        var html =
                          '<td>' + stDate + "  " + stDate1 + '</td>'
                        + '<td>' + ndDate + "  " + ndDate1 + '</td>'
                        + '<td>' + $(this).attr('ShortTitle') + '</td>'
                        + '<td>' + $(this).attr('Title') + '</td>'
                        + '<td>' + $(this).attr('Description') + '</td>'
                        //TODO: CARGAR UNA IMAGEN DESDE LA PC
                       // TODO: PONER URL FINAL DESPUES DE TESTEAR + '<td><img src="http://guardianes.greenpeace.org.ar/SatelliteImages/messages/' + $(this).attr('ImageURL') + '" /></td>'
                        + '<td><img width="100" src=" ../SatelliteImages/messages/' + $(this).attr('ImageURL') + '" /></td>'

                      + '<td><a href="#" onclick="deleteDailyMessage(' + $(this).attr('Id') + ');" title="Borrar Mensaje">X</a>';
                        $('<tr></tr>').html(html).appendTo('#MessagesTable');
                    });
                },
                error: function (xhr, textStatus, errorThrown) {
                    alert(errorThrown);
                }
            });
        }

        function deleteDailyMessage(id) {
            if (id == "") {
                alert("error");
                return false;
            }

            if (confirm('Está seguro que desea borrar este mensaje?')) {
                $.ajax({
                    type: 'POST',
                    beforeSend: function (xhr) {
                        xhr.setRequestHeader("Authorization", getAuthString());
                    },
                    url: "../api/popupmessages/del",
                    data: JSON.stringify(id),
                    dataType: "json",
                    contentType: 'application/json; charset=utf-8',
                    success: function (result) {
                        alert('Operación Exitosa!');
                        LoadDailyMessages();
                    },
                    error: function (xhr, textStatus, errorThrown) {

                        if (xhr.status = 200) //Tira un error de sintaxis al agregar la carga de la imagen
                        {
                            alert('Operación Exitosa!');
                            LoadDailyMessages();
                        }
                        else
                        {
                            alert(errorThrown);
                            LoadDailyMessages();
                        }
                    }
                });
            }
        }

        $(document).ready(function () {
            $("#addDailyMessage").click(function () {
                var syear = $('#yearInput').val();
                var smonth = $('#monthInput').val();
                var sday = $('#dayInput').val();
                var shour = $('#hourInput').val();
                var sminutes = $('#minutesInput').val();
                var sdate = new Date(parseInt(syear), (parseInt(smonth) - 1), parseInt(sday), (parseInt(shour) - 3), parseInt(sminutes), 00, 0);

                var eyear = $('#endyearInput').val();
                var emonth = $('#endmonthInput').val();
                var eday = $('#enddayInput').val();
                var ehour = $('#endhourInput').val();
                var eminutes = $('#endminutesInput').val();
                var edate = new Date(parseInt(eyear), (parseInt(emonth) - 1), parseInt(eday), (parseInt(ehour) - 3), parseInt(eminutes), 00, 0);

                var shortTitle = $('#shortTitle').val();
                var title = $('#title').val();
                var description = $('#descriptionInput').val();
                var imageUrl = $('#imageUrlInput').val();

                var eticks = edate.getTime();
                var sticks = sdate.getTime();

                if (edate > sdate)
                {
                        $.ajax({
                        type: "POST",
                        url: "../api/popupmessages/add",
                        beforeSend: function (xhr) {
                            xhr.setRequestHeader("Authorization", getAuthString());
                        },
                        data: JSON.stringify({
                            ShortTitle: shortTitle.toString(),
                            Title: title.toString(),
                            Description: description.toString(),
                            EndDate: "/Date(" + eticks.toString() + ")/",
                            StartDate: "/Date(" + sticks.toString() + ")/",
                        }),
                        contentType: "application/json ; charset=utf-8",
                        dataType: "json",
                        success: function () {
                            alert("Congratulations, new message added.");
                            LoadDailyMessages();
                        },
                        error: function (xhr, textStatus, errorThrown) {
                            alert("error, something went wrong adding the message");
                        }
                    });
                }
                else {
                    alert('Ambas fechas deben ser diferentes');
                }
            });

            $("#LoadDailyMessages").click(function () {
                LoadDailyMessages();
            });
        });

    </script>
</body>
</html>
